<template>
	<div class="app-container">
    <el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">

      <el-form-item>
        <el-input placeholder="请验编号" v-model="dataForm.queryCheckId" :clearable="true" type="number" size="mini">
          <template slot="prepend">请验编号</template>
        </el-input>
      </el-form-item>
      <br />

      <el-form-item>
        <el-input placeholder="品名" v-model="dataForm.productName" :clearable="true" size="mini">
          <template slot="prepend">品名</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="GMP编码" v-model="dataForm.productGmp" :clearable="true" size="mini">
          <template slot="prepend">GMP编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="批号" v-model="dataForm.batchNum" :clearable="true" size="mini">
          <template slot="prepend">物料编码</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="dataForm.status" multiple filterable clearable placeholder="全部状态" size="mini">
          <el-option label="待取样" value="1" />
          <el-option label="待收样" value="2" />
          <el-option label="待分样" value="3" />
          <el-option label="检验中" value="4" />
          <el-option label="等待中" value="5" />
          <el-option label="待结论" value="6" />
          <el-option label="待收报告" value="10" />
          <el-option label="待放行" value="7" />
          <el-option label="已完成" value="8,11" />
      	</el-select>
      </el-form-item>

      <el-form-item v-if="userInfo.types.length != 0">
        <el-select v-model="dataForm.checkTypeId" clearable placeholder="全部分类" size="mini">
          <el-option
            v-for="t in userInfo.types"
            :key="t.checkTypeId"
            :label="t.checkTypeName"
            :value="t.checkTypeId">
          </el-option>
      	</el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="dataForm.time"
          type="daterange"
          @change="setTime"
          range-separator="-"
          start-placeholder="开始时间"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          size="mini">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="pan-btn primary-btn" @click="searchData()" icon="el-icon-search" size="mini">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
    	:data="dataList"
    	v-loading="dataListLoading"
      ref="dataTable"
    	border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="checkId"
        header-align="center"
        align="center"
        label="编号"
        width="80">
        <template slot-scope="{row}">
          {{ row.checkId }}
        </template>
      </el-table-column>
      <el-table-column
      	prop="status"
      	header-align="center"
      	align="center"
      	label="状态"
        width="100">
        <template slot-scope="{row}">
          <div @mouseenter="showCard(row)" @mouseleave="hideCard(row)">
            <el-tag :type="row.status == 8 ? 'success' : 'primary'" size="small">
              {{ row.status | statusFilter }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="checkTypeName"
        header-align="center"
        align="center"
        label="分类"
        width="100">
        <template slot-scope="{row}">
          {{ row.checkTypeName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="品名">
        <template slot-scope="{row}">
          {{ row.productName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="productGmp"
        header-align="center"
        align="center"
        label="GMP编码">
        <template slot-scope="{row}">
          {{ row.productGmp }}
        </template>
      </el-table-column>
      <el-table-column
        prop="batchNumPrefix"
        header-align="center"
        align="center"
        label="物料编码">
        <template slot-scope="{row}">
          {{ row.batchNum }}
        </template>
      </el-table-column>
      <el-table-column
        prop="productSpec"
        header-align="center"
        align="center"
        label="货品规格">
        <template slot-scope="{row}">
          <span v-html="row.productSpec"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="procedureName"
        header-align="center"
        align="center"
        label="工序">
        <template slot-scope="{row}">
          {{ row.procedureName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="registCheckDepartmentName"
        header-align="center"
        align="center"
        label="请验部门">
        <template slot-scope="{row}">
          {{ row.registCheckDepartmentName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="registCheckUserName"
        header-align="center"
        align="center"
        label="请验人">
        <template slot-scope="{row}">
          {{ row.registCheckUserName }}
        </template>
      </el-table-column>
      <el-table-column
        prop="registCheckDate"
        header-align="center"
        align="center"
        label="请验时间">
        <template slot-scope="{row}">
          {{ row.registCheckDate | changeTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="inspectDate"
        header-align="center"
        align="center"
        label="检验时间">
        <template slot-scope="{row}">
          {{ row.inspectDate | changeTime }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="dataForm.checkTypeId == 6"
        prop="stabilityModeName"
        header-align="center"
        align="center"
        label="考察方式">
        <template slot-scope="{row}">
          {{ row.stabilityModeName + ' ' + row.timeValue + row.timeName }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="warning" class="pan-btn warning-btn" size="mini" v-if="scope.row.status == 4 || scope.row.status == 5 && scope.row.isTest == 0" @click="inspect(scope.row)">详细</el-button>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="详情"
        width="100">
        <template slot-scope="scope">
          <el-button type="info" class="pan-btn info-btn" size="mini" @click="info(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-card v-cloak ref="card" v-if="stepsData.show" class="card-container">
      <div slot="header">
          <span>{{ stepsData.isMerge == 0 ? '合并' : '非合并' }}</span>
          <span>{{ testWay(stepsData.isTest) }}</span>
        </div>
    	<el-steps align-center :active="stepsData.active" finish-status="success">
    	  <el-step title="请验">
          <div slot="description">
            {{ stepsData.registCheckUserName }}</br>
            {{ stepsData.registCheckDate }}
          </div>
        </el-step>
        <el-step title="取样">
          <div slot="description">
            {{ stepsData.getUserName }}</br>
            {{ stepsData.getDate }}
          </div>
        </el-step>
        <el-step title="收样">
          <div slot="description">
            {{ stepsData.receiveUserName }}</br>
            {{ stepsData.receiveDate }}
          </div>
        </el-step>
        <el-step title="分发">
          <div slot="description">
            {{ stepsData.dispenseUserName }}</br>
            {{ stepsData.dispenseDate }}
          </div>
        </el-step>
        <el-step title="检验" v-if="stepsData.isTest == 0">
          <div slot="description">
            {{ stepsData.inspectGroupNames }}</br>
            {{ stepsData.inspectDate }}
          </div>
        </el-step>
        <el-step title="等待" v-if="stepsData.isMerge == 0" />
        <el-step title="结论" v-if="stepsData.isTest == 0">
          <div slot="description">
            {{ stepsData.verdictUserName }}</br>
            {{ stepsData.verdictDate }}
          </div>
        </el-step>
        <el-step title="待收报告" v-if="stepsData.isTest == 0" />
        <el-step title="放行" v-if="stepsData.isTest == 0">
          <div slot="description">
            {{ stepsData.passUserName }}</br>
            {{ stepsData.passDate }}
          </div>
        </el-step>
    	</el-steps>
    </el-card>

    <Inspect
      v-if="inspectVisible"
      @close="close('inspectVisible')"
      :childDataForm="childDataForm" />

    <check-info
      v-if="infoVisible"
      @close="close('infoVisible')"
      @refreshData="getDataList"
      :childDataForm="childDataForm" />

	</div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import CommonMethod from '@/views/mixin/common'
  import { CODE_OK } from '@/common/js/config'
  import { checkList } from '@/api/check'
  import { isBlank } from '@/common/js/utils'
  import CheckInfo from '@/views/modules/process/common/check-info'
  import Inspect from './inspect'
	export default {
    name: 'jianyanjingduchaxun',
    filters: {
      procedureNameFilter(name) {
        if (!isBlank(name)) {
          return name.replace(',',' ')
        }
        return null
      },
      statusFilter(status) {
        const statusMap = {
          0: '待处理',
          1: '待取样',
          2: '待收样',
          3: '待分发',
          4: '检验中',
          5: '等待中',
          6: '待结论',
          10: '待收报告',
          7: '待放行',
          8: '待确认',
          11: '已完成',
          9: '已作废'
        }
        return statusMap[status]
      }
    },
    mixins: [CommonMethod],
    components: {
    	CheckInfo,Inspect
    },
		data(){
      return{
        currentStatus: 8,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataForm: {
          productName: null,
          productGmp: null,
          batchNum: null,
          status: null,
          checkTypeId: null,
          startTime: null,
          endTime: null
        },
        childDataForm: '',
        infoVisible: false,
        inspectVisible: false,
        stepsData: {
        	active: 1,
        	show: false
        }
      }
		},
    mounted() {
      if (this.isAuth('check:progress:list')) {
        this.getInfo()
      }
    },
    computed: {
      ...mapGetters([
         'userInfo'
      ])
    },
		methods:{
      showCard(row) {
        this.$set(row,'show',false)
        row.active = row.status == 10 ? 7 : row.status
        this.stepsData = row
        this.stepsData.show = true
      },
      hideCard(row) {
        this.stepsData.show = false
      },
      searchData() {
      	this.pageIndex=1
      	this.getDataList()
      },
      getInfo() {
        this.getDataList()
      },
      getDataList() {
      	this.dataListLoading = true
        let status = JSON.parse(JSON.stringify(this.dataForm.status))
        if (status instanceof Array) {
          status = status.join(',')
        }
        const params = {
          page: this.pageIndex,
          limit: this.pageSize,
          status: status,
          startTime: this.dataForm.startTime || null,
          endTime: this.dataForm.endTime || null,
          checkTypeId: this.dataForm.checkTypeId || this.userInfo.types.map(t => {return t.checkTypeId}).join(','),
          productName: this.dataForm.productName || null,
          productGmp: this.dataForm.productGmp || null,
          batchNum: this.dataForm.batchNum || null,
          checkId: this.dataForm.queryCheckId || null
        }
        checkList(params).then(res => {
        	if (res.code === CODE_OK) {
        		this.dataList = res.page.list
        		this.totalPage = res.page.totalCount
        	}else{
        		this.$message.error(res.msg)
        	}
        	this.dataListLoading = false
        }).catch()
      },
      info(row) {
        this.childDataForm = {
          currentStatus: this.currentStatus,
          info: row
        }
        this.infoVisible = !this.infoVisible
      },
      inspect(row) {
        this.childDataForm = JSON.parse(JSON.stringify(row))
        this.inspectVisible = true
      },
      close(val) {
        this.childDataForm = ''
        this[val] = !this[val]
      },
      setTime() {
        if (isBlank(this.dataForm.time)) {
          this.dataForm.startTime = null
          this.dataForm.endTime = null
        }else{
          this.dataForm.startTime = this.dataForm.time[0]
          this.dataForm.endTime = this.dataForm.time[1]
        }
      }
		},
    watch: {
      $route: {
        handler: function (to, from){
          if (to.name === '检验进度查询') {
            if (!isBlank(to.params.serachInfo)) {
              this.dataForm.checkTypeId = to.params.serachInfo.checkTypeId
              this.dataForm.productGmp = to.params.serachInfo.productGmp
              this.dataForm.batchNum = to.params.serachInfo.batchNum
            }
            this.getDataList()
          }
        },
        immediate: true
      }
    }
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
  [v-cloak] {
    	display: none;
  }
  .card-container{
  	position: fixed;
    top: 0;
    right: 0;
  	width: 1000px;
  	z-index: 3000;
  }
</style>
